import React from "react";
import { connect } from "dva";
import "./Ueditor.scss";
import {
  UrlConfig,
  getConfig,
  uploadImgBase64,
  uploadOssImg,
  addToVideo,
  inStock
} from "../../../services/fetch";
import { message, Drawer } from "antd";
import { guid, sec_to_time } from "../../../utils/Date";
// import VideoPlayer from "../../../components/VideoPlayer"

let UE = "";
@connect(({ add }) => ({
  add: add
}))
export default class Ueditor extends React.Component {
  static defaultProps = {
    config: {}
  };

  constructor(props) {
    super(props);
    this.state = {
      video: "",
      audio: "",
      video_title: "",
      video_img: "",
      transcode_data: [],
      currentVideo: null,
      joveVisible: false
    };
    this.videoRef = React.createRef();
  }
  componentDidMount() {
    window.UEDITOR_HOME_URL = `${UrlConfig}/application/fcinformation/resource/ueditor/`;
    let ueJs = `${UrlConfig}/application/fcinformation/resource/ueditor/ueditor.all.js`;
    const hide = message.loading("编辑器加载中...", 0);
    getConfig().then(res => {
      let { config_json } = res.data.data;
      let cj = JSON.stringify(config_json);
      localStorage.setItem("config_json", cj);
      if (config_json.aliyunOssSwitch) {
        //如果开启oss上传，则加载修改过包含oss上传的代码
        ueJs = `${UrlConfig}/application/fcinformation/resource/ueditor/ueditor.all.oss.js`;
      }
      let arr = [
        // `${UrlConfig}/application/fcinformation/resource/dash/dash.all.min.js`,
        `${UrlConfig}/application/fcinformation/resource/ueditor/ueditor.config.js`,
        ueJs,
        `${UrlConfig}/application/fcinformation/resource/ueditor/lang/zh-cn/zh-cn.js`,
        `//gosspublic.alicdn.com/aliyun-oss-sdk-6.1.0.min.js`
      ];
      this.loadScript(arr, 0, () => {
        setTimeout(hide, 100);

        let xmsc = document.createElement("script");
        xmsc.src = `${UrlConfig}/application/fcinformation/resource/ueditor/xiumi-ue-dialog-v5.js`;
        document.querySelector("body").appendChild(xmsc);

        let xmcss = document.createElement("link");
        xmcss.href = `${UrlConfig}/application/fcinformation/resource/ueditor/xiumi-ue-v5.css`;
        xmcss.rel = `stylesheet`;
        document.querySelector("head").appendChild(xmcss);

        this.extendUEditor();
        this.extend135();
        this.initEditor();

        //获取详情数据
        if (this.props.match.params.video_id) {
          this.props.dispatch({
            type: "add/edit",
            data: this.props.match.params.video_id,
            callback: data => {
              let ue = window.UE.getEditor("content");
              ue.ready(function() {
                if (data.content) {
                  ue.setContent(data.content);
                }
              });
              // let id = data.type
              // // this.setState({
              // //     activeKey: String(id)
              // // });
              // this.props.dispatch({ type: 'add/setActiveKey', data: String(id) });
              // this.setFields(data)
            }
          });
        }
        //专题编辑获取详情数据
        if (this.props.match.params.class == "theme_edit") {
          this.props.dispatch({
            type: "add/editGetThemeDetail",
            data: this.props.match.params.theme_id,
            callback: data => {
              let ue = window.UE.getEditor("content");
              ue.ready(function() {
                if (data.content) {
                  ue.setContent(data.content);
                }
              });
              // let id = data.type
              // // this.setState({
              // //     activeKey: String(id)
              // // });
              // this.props.dispatch({ type: 'add/setActiveKey', data: String(id) });
              // this.setFields(data)
            }
          });
        }
      });
    });

    // if (this.props.configJson.aliyunOssSwitch) { //如果开启oss上传，则加载修改过包含oss上传的代码
    //   ueJs = `${UrlConfig}/application/fcinformation/resource/ueditor/ueditor.all.oss.js`;
    // }
    // let arr = [
    //   // `${UrlConfig}/application/fcinformation/resource/dash/dash.all.min.js`,
    //   `${UrlConfig}/application/fcinformation/resource/ueditor/ueditor.config.js`, ueJs, `${UrlConfig}/application/fcinformation/resource/ueditor/lang/zh-cn/zh-cn.js`,
    // ]
    // const hide = message.loading('编辑器加载中...', 0);
    // this.loadScript(arr, 0, () => {
    //   setTimeout(hide, 100);
    //   this.initEditor()
    // });
  }

  /**
   * 创建音频到富文本中
   */
  createAudioToUeditor = (url, content_id) => {
    let ue = window.UE.getEditor("content");
    ue.focus();
    let datas = `<p></p><audio contentid="${content_id}" style="margin: 10px auto;display: block;" src="${url}" controls>您的浏览器不支持 audio 标签。</audio><p></p>`;
    ue.execCommand("insertHtml", datas);
  };

  /**
   * 创建图片到富文本中
   */
  createImgToUeditor = url => {
    let ue = window.UE.getEditor("content");
    ue.focus();
    let datas = `<p></p><img style="margin: 10px auto;display: block;" src="${url}" /><p></p>`;
    ue.execCommand("insertHtml", datas);
  };

  /**
   * 创建视频到富文本中
   */
  createVideoToUeditor = (url, org_url) => {
    this.setState({
      video: url,
      originalVideo: org_url
    });
  };
  /**
   * 创建魔盒样式库元素到富文本中
   */
  createStyleToUeditor = url => {
    let ue = window.UE.getEditor("content");
    ue.focus();
    let datas = `<p></p><img style="margin: 10px auto;display: block;" src="${url}" /><p></p>`;
    ue.execCommand("insertHtml", datas);
  };

  /**
   * 视频截图
   */
  snapScreen = () => {
    const hide = message.loading("视频上传成功,封面图生成中...", 0);
    /**
     * 上传视频自动生成封面图功能  详解
     * 调用上传视频接口后端返回上传成功mp4地址，先放到一个隐藏的video标签中，然后利用canvas的drawImage方法截取视频关键帧，获得图片的base64地址
     * 然后在调用后端接口将base64地址上传后转换成.jpg的资源文件地址，最后在设置到video标签的poster属性上，完成视频上传自动生成封面图功能
     *
     * 彩蛋，crossorigin="anonymous" 加了这个属性后可解决canvas获取跨域资源问题
     * 但是需要后端配合修改Access-Control-Allow-Origin
     * 由于本地老是报错出现跨域问题，至今没解决。所以每次只有佛系修改代码。打包后传到服务器上测试。
     *
     * */
    let url = this.state.video;
    let org_video = this.state.originalVideo;
    const hidden_video = this.videoRef.current;
    // const hidden_video = window.document.getElementById('hidden_video').children[0];

    let canvas = document.createElement("canvas");
    let data;
    var videoWidth =
      hidden_video.videoWidth > 0 ? hidden_video.videoWidth : 295;
    var videoHeight =
      hidden_video.videoHeight > 0 ? hidden_video.videoHeight : 165;
    var width = videoWidth > 640 ? 640 : videoWidth;

    var height = videoHeight * (width / videoWidth);

    // console.log(hidden_video);
    canvas.width = width; //这个设置不能丢，否者会成为canvas默认的300*150的大小
    canvas.height = height; //这个设置不能丢，否者会成为canvas默认的300*150的大小
    let ctx = canvas.getContext("2d"); //创建画布
    // hidden_video.setAttribute('crossOrigin', 'anonymous');

    ctx.drawImage(hidden_video, 0, 0, width, height); //将视频写入canvas

    data = canvas.toDataURL("images/png"); //

    uploadImgBase64({ img: data }).then(res => {
      if (res.data.code == 200) {
        let video_data = this.getVideoInfo();
        let content_id = "";
        let video_img;
        if (this.props.configJson.aliyunOssSwitch) {
          uploadOssImg({ file: res.data.data }).then(res2 => {
            if (res2.data.code == 200) {
              setTimeout(hide, 100);
              video_img = res2.data.data;
              video_data.video_img = video_img;

              //视频入库
              addToVideo(video_data).then(res => {
                if (res.data.code == 200) {
                  if (this.props.configJson.aliyunTranscodeSwitch) {
                    let transcode_data = this.state.transcode_data;
                    transcode_data.video_id = res.data.data;
                    this.props.dispatch({
                      type: "add/setTranscodeData",
                      data: [...this.props.add.transcode_data, transcode_data]
                    });
                  }

                  if (
                    this.props.configJson.mchSwitch &&
                    this.props.configJson.aliyunOssSwitch &&
                    this.props.configJson.materialPushSwitch
                  ) {
                    let postData = {
                      video_id: res.data.data
                    };
                    inStock(postData).then(res => {
                      if (res.data.code == 200) {
                        content_id = res.data.data.contentId;
                      }

                      this.insertVideo(content_id, url, video_img, org_video);
                    });
                  } else {
                    this.insertVideo(content_id, url, video_img, org_video);
                  }
                } else {
                  this.insertVideo(content_id, url, video_img, org_video);
                }
              });
            }
          });
        } else {
          setTimeout(hide, 100);
          video_img = res.data.data;
          video_data.video_img = video_img;
          //视频入库
          addToVideo(video_data).then(res => {
            this.insertVideo(content_id, url, video_img, org_video);
          });
        }
      }
    });
  };

  //获取上传视频信息
  getVideoInfo = () => {
    let data = {
      video_src: this.state.video,
      video_title: this.state.video_title
    };
    const videoSrc = this.videoRef.current;
    // const videoSrc = window.document.getElementById('hidden_video').children[0];
    //获取视频时长
    if (!videoSrc) {
      data.video_time = "00:00:00";
    } else {
      if (!videoSrc.duration) {
        videoSrc.load();
        videoSrc.oncanplay = function() {
          if (videoSrc.duration) {
            data.video_time = sec_to_time(videoSrc.duration);
          } else {
            data.video_time = "00:00:00";
          }
        };
      } else {
        let time = videoSrc.duration;
        time = Math.floor(time);
        data.video_time = sec_to_time(time);
      }
    }
    return data;
  };

  //获取上传音频信息
  getAudioInfo = () => {
    let data = {
      video_src: this.state.audio,
      type: 2,
      video_img: `${UrlConfig}/application/fcpublic/resource/images/default.png`
    };

    const videoSrc = window.document.getElementById("audio_src");
    //获取音频时长
    if (!videoSrc) {
      data.video_time = "00:00:00";
    } else {
      if (!videoSrc.duration) {
        videoSrc.load();
        videoSrc.oncanplay = function() {
          if (videoSrc.duration) {
            data.video_time = sec_to_time(videoSrc.duration);
          } else {
            data.video_time = "00:00:00";
          }
        };
      } else {
        let time = videoSrc.duration;
        time = Math.floor(time);
        data.video_time = sec_to_time(time);
      }
    }
    return data;
  };

  //视频插入富文本
  insertVideo = (content_id, url, poster, org_url) => {
    let ue = window.UE.getEditor("content");
    ue.focus();
    // org_url = url;
    // url = 'http://oss.combapp.sobeylingyun.com/recordings/z1.combapp-live2019.live156940916128526/1569825060_1569825322.m3u8';
    const ext = url
      ? url
          .split(".")
          .pop()
          .toLowerCase()
      : "mp4";
    const source_type = ext == "m3u8" ? "application/x-mpegURL" : "video/mp4";

    let datas;

    if (ext.indexOf("m3u8") != -1) {
      datas = `<p></p><video  class='video-js vjs-big-play-centered vjs-16-9'    src="${org_url}" contentid="${content_id}" poster="${poster}"
                                        style="width:100%;"
                                        controls
                                        webkit-playsinline="true"
                                        x-webkit-airplay="true"
                                        playsinline="true"
                                        x5-playsinline="true"
                                        data-setup="{}"
                                    >

                                    <source src="${url}"   type="${source_type}">
                                        </video><p></p>`;
    } else {
      datas = `<p></p><video  src="${url}"  contentid="${content_id}" poster="${poster}"
                                        style="width:100%;"
                                        controls
                                        webkit-playsinline="true"
                                        x-webkit-airplay="true"
                                        playsinline="true"
                                        x5-playsinline="true"
                                    >
                                        您的浏览器不支持 video 标签。
                                        </video><p></p>`;
    }

    ue.execCommand("insertHtml", datas);
  };

  /**
   * 上传文件插件
   */
  fcUpload = type => {
    let max_size = 2000;
    if (type == "audio") {
      max_size = 20;
    }

    let multiple = true;
    if (type == "video" || type == "audio") {
      multiple = false;
    }

    window.fc = new window.FcUpload({
      elem: "fcUpload" + type,
      oss: this.props.configJson.aliyunOssSwitch, //是否为oss 上传
      multiple: multiple, //是否允许上传多个文件
      type: type, // 上传文件类型\ img 图片，  video 视频
      actionImg: `${UrlConfig}/fcpublic/uploads/uploadImg`, //本地上传图片地址
      actionVideo: `${UrlConfig}/fcpublic/uploads/uploadVideo`, //本地上传视频地址
      actionOss: this.props.configJson.actionOss, //后端认证接口，获取临时上传凭证
      endpoint: this.props.configJson.endpoint,
      bucket: this.props.configJson.bucket,
      customDomain: this.props.configJson.customDomain,
      ossConfig: this.props.configJson,
      maxSize: max_size,
      callback: callRes => {
        console.log(callRes);
        let url;
        if (callRes.newResponse.length > 1 && type == "video") {
          message.error("视频暂不支持批量上传");
          return;
        }
        callRes.newResponse.forEach(async (url, index) => {
          if (!url) {
            return;
          }
          switch (type) {
            case "video":
              // url = "http://oss.combapp.sobeylingyun.com/recordings/z1.combapp-live2019.live156940916128526/1569825060_1569825322.m3u8";
              let org_url;
              if (
                callRes.response[index] &&
                callRes.response[index].data &&
                callRes.response[index].data.original_path
              ) {
                org_url = callRes.response[index].data.original_path;
              } else {
                org_url = url;
              }
              await this.createVideoToUeditor(url, org_url);
              //转码
              if (
                this.props.configJson.aliyunOssSwitch &&
                this.props.configJson.aliyunTranscodeSwitch
              ) {
                let storeAs = guid();
                let nowDate = new Date();
                let year = nowDate.getFullYear();
                let month = nowDate.getMonth() + 1;
                let day = nowDate.getDate();
                let new_url =
                  "transcode/" + year + "/" + month + "/" + day + "/" + storeAs;
                let http =
                  document.location.protocol +
                  "//" +
                  this.props.configJson.bucket +
                  "." +
                  this.props.configJson.endpoint +
                  "/";

                let old_url = url.replace(http, "");
                if (this.props.configJson.customDomain) {
                  old_url = old_url.replace(
                    this.props.configJson.customDomain + "/",
                    ""
                  );
                  old_url = old_url.replace(
                    this.props.configJson.customDomain,
                    ""
                  );
                }
                let arr = old_url.split(".");
                let postData = {
                  oss_bucket: this.props.configJson.bucket,
                  oss_input_object: old_url,
                  oss_output_object: new_url + "." + arr[1]
                };
                this.setState({
                  transcode_data: postData
                });
              }
              this.setState({
                video_title: callRes.file.name.split(".")[0]
              });

              break;
            case "audio":
              this.setState({
                audio: url
              });
              let video_data = this.getAudioInfo();
              setTimeout(() => {
                let video_data = this.getAudioInfo();
                video_data.video_src = url;
                video_data.video_title = callRes.file.name.split(".")[0];

                let content_id = "";
                //音频入视频库
                addToVideo(video_data).then(res => {
                  if (res.data.code == 200) {
                    //音频暂时不入jove库
                    // if (this.props.configJson.mchSwitch && this.props.configJson.materialPushSwitch) {
                    //     let postData = {
                    //         'video_id': res.data.data,
                    //
                    //     }
                    //     inStock(postData).then((res) => {
                    //         if (res.data.code == 200) {
                    //             content_id = res.data.data.contentId
                    //         }
                    //
                    //         this.createAudioToUeditor(url, content_id);
                    //     })
                    // } else {
                    //     this.createAudioToUeditor(url, content_id);
                    // }
                    this.createAudioToUeditor(url, content_id);
                  } else {
                    this.createAudioToUeditor(url, content_id);
                  }
                });
              }, 1000);

              break;
            case "img":
              this.createImgToUeditor(url);
              break;
            case "style":
              this.createStyleToUeditor(url);
              break;
          }
        });
      }
    });

    window.fc.show();
  };

  /**
   * 递归加载JS
   */
  loadScript = (arr, leve = 0, callback) => {
    if (leve == arr.length) {
      callback();
      return;
    } else {
      let sc = document.createElement("script");
      sc.src = arr[leve];
      document.querySelector("body").appendChild(sc);
      sc.onload = e => {
        //加载完后继续递归加载
        leve += 1;
        this.loadScript(arr, leve, callback);
      };
      sc.onerror = e => {
        //失败也同样
        leve += 1;
        this.loadScript(arr, leve, callback);
      };
    }
  };

  componentDidUpdate() {}

  componentWillUnmount() {
    // 组件卸载后，清除放入库的id
  }

  initEditor() {
    const that = this;
    const { id, config } = this.props;
    if (id) {
      try {
        /*加载之前先执行删除操作，否则如果存在页面切换，
                再切回带编辑器页面重新加载时不刷新无法渲染出编辑器*/
        UE.delEditor(id);
      } catch (e) {}
    }
    const ueEditor = window.UE.getEditor(this.props.id, config);
    ueEditor.addListener("mouseover", function(type, e) {
      const current = e.target || e.srcElement;
      const toolbar = document.getElementById("video-toolbar");
      if (toolbar) {
        if (/video/gi.test(current.tagName)) {
          const rect = current.getBoundingClientRect();
          toolbar.style.display = "flex";
          toolbar.style.top = rect.bottom + 105 + "px";
          toolbar.style.left = rect.right + "px";
          that.setState({ currentVideo: current });
        } else {
          toolbar.style.display = "none";
        }
      }
    });
    if (this.props.configJson.aliyunOssSwitch) {
      window.UE.Editor.prototype._bkGetActionUrl =
        window.UE.Editor.prototype.getActionUrl;
      window.UE.Editor.prototype.getActionUrl = function(action) {
        if (action == "catchimage") {
          //重定义远程文件上传地址
          return `${UrlConfig}/fcpublic/uploads/aliyunossUpload`;
        }else if (action == "uploadimage") {
          //重定义远程文件上传地址
          return `${UrlConfig}/fcpublic/uploads/aliyunossUploadBinary`;
        }  else {
          return this._bkGetActionUrl.call(this, action);
        }
      };
    }

    const self = this;

    ueEditor.ready(ueditor => {
      if (!ueditor) {
        UE.delEditor(id);
        self.initEditor();
      }
      document
        .querySelector("#ueditor_0")
        .contentDocument.querySelector("body").style.writingMode =
        "vertical-lr";
      document
        .querySelector("#ueditor_0")
        .contentDocument.querySelector("edui1_bottombar").style.display =
        "none";
    });
  }

  extendUEditor = () => {
    const that = this;
    window.UE.registerUI("img audio video", function(editor, uiName) {
      //注册按钮执行时的command命令，使用命令默认就会带有回退操作
      editor.registerCommand(uiName, {
        execCommand: function() {
          that.fcUpload(uiName);
        }
      });
      //创建一个button
      var btn = new window.UE.ui.Button({
        //按钮的名字
        name: uiName,
        //提示
        title: uiName === "img" ? "图片" : uiName === "audio" ? "音乐" : "视频",
        //添加额外样式,指定icon图标,这里默认使用一个重复的icon
        cssRules: "",
        //点击时执行的命令
        onclick: function() {
          //这里可以不用执行命令,做你自己的操作也可
          editor.execCommand(uiName);
        }
      });
      //当点到编辑内容上时，按钮要做的状态反射
      editor.addListener("selectionchange", function(e) {
        var state = editor.queryCommandState(uiName);
        if (state == -1) {
          btn.setDisabled(true);
          btn.setChecked(false);
        } else {
          btn.setDisabled(false);
          btn.setChecked(state);
        }
      });
      //因为你是添加button,所以需要返回这个button
      return btn;
    });
  };

  extend135 = () => {
    window.UE.registerUI("135dialog", function(editor, uiName) {
      var btn = new window.UE.ui.Button({
        name: "sobey_135",
        title: "135",
        onclick: function() {
          var dialog = new window.UE.ui.Dialog({
            iframeUrl:
              editor.getOpt("UEDITOR_HOME_URL") + "135EditorDialogPage.html",
            editor: editor,
            name: "sobey_135",
            title: "135图文消息助手",
            cssRules:
              "width: " +
              (window.innerWidth - 60) +
              "px;height: " +
              (window.innerHeight - 60) +
              "px;"
          });
          dialog.render();
          dialog.open();
        }
      });

      return btn;
    });
    window.UE.registerUI("xiumidialog", function(editor, uiName) {
      var btn = new window.UE.ui.Button({
        name: "xiumi-connect",
        title: "秀米",
        onclick: function() {
          var dialog = new window.UE.ui.Dialog({
            iframeUrl:
              editor.getOpt("UEDITOR_HOME_URL") + "xiumi-ue-dialog-v5.html",
            editor: editor,
            name: "xiumi-connect",
            title: "秀米图文消息助手",
            cssRules:
              "width: " +
              (window.innerWidth - 60) +
              "px;height: " +
              (window.innerHeight - 60) +
              "px;"
          });
          dialog.render();
          dialog.open();
        }
      });

      return btn;
    });
  };

  setEdiotrContent = content => {
    let ue = window.UE.getEditor("content");
    ue.setContent(content);
  };
  // 前空行
  setFrontBlankLine = () => {
    const { currentVideo } = this.state;
    let ue = window.UE.getEditor("content");
    if (currentVideo) {
      currentVideo.parentNode.parentNode.insertBefore(
        this.getBlankLine(),
        currentVideo.parentNode
      );
    }
    ue.focus();
  };
  // 后空行
  setBackBlankLine = () => {
    const { currentVideo } = this.state;
    let ue = window.UE.getEditor("content");
    if (currentVideo) {
      currentVideo.parentNode.parentNode.insertBefore(
        this.getBlankLine(),
        currentVideo.parentNode.nextSibling
      );
    }
    ue.focus();
  };
  getBlankLine = () => {
    var p = document.createElement("p");
    var br = document.createElement("br");
    p.appendChild(br);
    return p;
  };
  // 打开jove
  openJove = () => {
    this.setState({ joveVisible: true });
  };
  // 删除视频
  delVideo = () => {
    const { currentVideo } = this.state;
    let ue = window.UE.getEditor("content");
    if (currentVideo) {
      currentVideo.parentNode.removeChild(currentVideo);
    }
    ue.focus();
  };
  onJoveClose = () => {
    this.setState({ joveVisible: false });
  };
  render() {
    const { configJson, title } = this.props;
    const { currentVideo } = this.state;

    const contentid = currentVideo
      ? currentVideo.getAttribute("contentid")
      : "";

    const VideoUrl = this.state.video;
    // const VideoUrl = "http://oss.combapp.sobeylingyun.com/recordings/z1.combapp-live2019.live156940916128526/1569825060_1569825322.m3u8";
    const ext = VideoUrl
      ? VideoUrl.split(".")
          .pop()
          .toLowerCase()
      : "mp4";
    const videoJsOptions = {
      autoplay: false,
      controls: true,
      height: 165,
      width: 295,
      loop: false,
      // playbackRates: [0.5, 1, 1.5, 2],
      sources: [
        {
          src: VideoUrl,
          type: ext == "m3u8" ? "application/x-mpegURL" : "video/mp4"
        }
      ],
      isUpdate: 1 //是否新视频触发截图
    };

    return (
      <div className="ueditor-parent2">
        {configJson.mchSwitch && configJson.isJoveLite ? (
          <div id="video-toolbar" className="ueditor-video-box">
            <div className="ueditor-video-toolbar">
              <div onClick={this.setFrontBlankLine} className="toolbar-item">
                前空行
              </div>
              <div onClick={this.setBackBlankLine} className="toolbar-item">
                后空行
              </div>
              {contentid ? (
                <div onClick={this.openJove} className="toolbar-item">
                  JOVE
                </div>
              ) : null}
              <div onClick={this.delVideo} className="toolbar-item">
                删除
              </div>
            </div>
          </div>
        ) : null}
        {/*{this.state.video ?  <VideoPlayer  snapScreen={() => { this.snapScreen(); }}   videoId="hidden_video" crossOrigin="anonymous"   videoJsOptions={videoJsOptions}  /> :''}*/}
        <video
          preload="auto"
          id="hidden_video"
          controls="controls"
          ref={this.videoRef}
          onCanPlay={this.snapScreen}
          src={this.state.originalVideo}
          crossOrigin="anonymous"
        ></video>
        <div
          id={this.props.id}
          name="content"
          type="text/plain"
          style={{ height: "1015px" }}
        ></div>
        <div id="fcUploadvideo"></div>
        <div id="fcUploadaudio"></div>
        <div id="fcUploadimg"></div>
        {/*<video id="VideoTime" preload="meta" style={{ display: "none" }} src={this.state.video} controls="controls">*/}
        {/*</video>*/}
        <audio
          id="audio_src"
          preload="meta"
          style={{ display: "none" }}
          src={this.state.audio}
          controls="controls"
        ></audio>
        <Drawer
          style={{ height: "100%" }}
          placement="right"
          closable={true}
          mask={true}
          width={688}
          maskClosable={false}
          onClose={this.onJoveClose}
          visible={this.state.joveVisible}
        >
          <iframe
            style={{ width: "100%", height: "100%" }}
            src={`${configJson.mchHost}/${configJson.mchToken}/${contentid}/${
              configJson.joveHost
            }/${configJson.mchSiteCode}?locale=zh&title=${title || ""}`}
            frameborder="0"
          ></iframe>
        </Drawer>
      </div>
    );
  }
}
